<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
  <scroll-view
    class="page-container"
    @scrolltolower="loadMore"
    :scroll-y="true"
    :bounces="false"
    :enable-back-to-top="true"
  >
    <!-- 搜索栏 -->
    <SerachBar />

    <!-- 分类导航 -->
    <view class="category-panel">
      <scroll-view scroll-x class="category-scroll">
        <view class="category-grid">
          <view
            v-for="(item, index) in categories"
            :key="index"
            class="category-item"
            @click="navigateToCategory(item.id)"
          >
            <image :src="item.imageUrl" class="category-icon" />
            <text class="category-name">{{ item.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 商品标签 -->
    <view class="product-tabs">
      <scroll-view scroll-x class="tab-scroll">
        <view class="tab-container">
          <view :class="['tab-item', activeTab === -1 && 'active']" @click="switchTab(-1)">
            <view>
              <view style="min-height: 30rpx">推荐</view>
            </view>
            <view :class="['tab-item-labe', activeTab === -1 && 'active-labe']">来水鱼</view>
          </view>
          <text
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-item', activeTab === index && 'active']"
            @click="switchTab(index)"
          >
            <view>
              <view style="min-height: 30rpx">{{ tab.name }}</view>
            </view>
            <view :class="['tab-item-labe', activeTab === index && 'active-labe']">
              {{ tab.lableTitle }}
            </view>
          </text>
        </view>
      </scroll-view>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-container">
        <product-card
          v-for="product in products"
          layout-model="grid"
          :key="product.id"
          :product="product"
          @childClick="showModlePop"
        />
      </view>
      <wd-loadmore :loading="loading" />
    </view>
  </scroll-view>
  <SelectdProduct ref="SelectdProductRef"></SelectdProduct>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
import { listLimit10 } from '@/service/goods/category/category'
import { pageList } from '@/service/goods/index'
import { usePagination } from '@/hooks/usePagination'

const SerachBar = defineAsyncComponent(() => import('@/components/serach-bar/index.vue'))
const ProductCard = defineAsyncComponent(() => import('@/components/product/product-card.vue'))
const SelectdProduct = defineAsyncComponent(() => import('@/components/selectdProduct/index.vue'))
const SelectdProductRef = ref()

const getCategoriesData = async (size: number) => {
  try {
    const { code, data } = await listLimit10({ size })
    if (size === 10) {
      if (code === 200 && data != null) {
        categories.value = data
      }
    } else {
      if (code === 200 && data != null) {
        tabs.value = data
      }
    }
  } catch (error) {
    uni.showToast({ title: '数据加载失败', icon: 'none' })
  }
}
getCategoriesData(10)
getCategoriesData(4)
// 分类数据
const categories = ref([])

const showModlePop = (skuId: number | string, goodsId: number | string) => {
  SelectdProductRef.value.hanleOpen(skuId, goodsId)
  console.log(skuId, goodsId)
}

// 商品标签
const tabs = ref([])
const activeTab = ref(-1)


const {
  list: products,
  loading,
  loadData,
  reset: resetPagination,
  params: queryParams,
} = usePagination({
  apiMethod: pageList, // 你的API方法
  initialParams: {
    // 初始查询参数
    categoryId: null,
    size: 10,
  },
})
loadData()
// 切换标签
const switchTab = async (index: number) => {
  activeTab.value = index
  // 更新查询参数
  queryParams.value.categoryId = index === -1 ? null : tabs.value[index]?.id

  // 重置分页状态
  resetPagination()

  // 加载数据
  await loadData()
}

const loadMore = () => {
  if (!loading.value) {
    loadData()
  }
}

const navigateToCategory = (id: number) => {
  uni.navigateTo({ url: `/pages/categorize/index?id=${id}` })
}
</script>

<style lang="scss" scoped>
.page-container {
  height: calc(100vh - var(--window-top));

  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  background: #f5f5f5;
}

.category-panel {
  padding: 30rpx 0;
  margin: 20rpx 15rpx;
  background: #fff;
  border-radius: 24rpx;

  .category-scroll {
    width: 100%;
    white-space: nowrap;

    .category-grid {
      display: inline-flex;
      flex-wrap: wrap;
      width: 690rpx;

      .category-item {
        width: 138rpx;
        margin-bottom: 30rpx;
        text-align: center;

        .category-icon {
          width: 80rpx;
          height: 100rpx;
          margin-bottom: 16rpx;
        }

        .category-name {
          display: -webkit-box;
          overflow: hidden;
          font-size: 24rpx;
          line-height: 1.4;
          color: #333;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}

.product-tabs {
  max-height: 100rpx;
  padding: 20rpx 0;
  margin: 0 10rpx;
  // background: #fff;
  // border-radius: 24rpx;

  .tab-scroll {
    width: 100%;
    white-space: nowrap;

    .tab-container {
      display: inline-flex;

      .tab-item {
        position: relative;
        min-width: 80rpx;
        padding: 0 15rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
        transition: color 0.3s;
        .tab-item-labe {
          display: block;
          padding: 6rpx;
          margin: 10rpx 0;
          font-size: 18rpx;
          line-height: 1;
          text-align: center;
          &.active-labe {
            color: $uni-text-color-inverse !important;
            background: linear-gradient(90deg, #ff9130, #ff5f15) !important;
            border-radius: 10rpx;
          }
        }

        &.active {
          font-size: 32rpx;
          font-weight: 600;
          color: #000;
          &::after {
            position: absolute;
            bottom: -10rpx;
            left: 50%;
            width: 60%;
            height: 4rpx;
            content: '';
            background: #e5492a;
            border-radius: 2rpx;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
}

.product-list {
  box-sizing: border-box;
  min-height: 600rpx;
  padding: 0 15rpx;
  .product-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
